<template>
  <div v-if="listData" class="container noBgColor">
    <div class="title-box">
      <div class="title fs-22">
        <span>{{ listData.title }}</span>
        <div v-if="isDisplay">
          <el-button class="btn-color" type="success" size="medium" @click="open">开启直播</el-button>
          <el-button class="btn-color" type="success" size="medium" @click="edit">编辑</el-button>
          <el-button size="medium" @click="del">删除</el-button>
        </div>
      </div>
      <div class="classify-box marginT15">
        <div class="classify">
          <span v-if="listData.phase">{{ listData.phase.itemName }}/</span>
          <span v-if="listData.subject">{{ listData.subject.itemName }}</span>
        </div>

        <div v-if="listData.teachingTarget" class="obj marginL40">
          教学对象：{{ listData.teachingTarget.itemName }}
          <span
            v-for="(item, index) in listData.categoryArr"
            :key="index"
          >,&nbsp;{{ item.tagsName }}</span>
        </div>
      </div>
      <div
        v-if="listData.categoryArr && listData.categoryArr.length > 0"
        class="classify-box text-s-o"
      >
        <div v-for="(item, index) in listData.tagListArr" :key="index" class="classify">
          <span v-if="index === 0">{{ item.tagsName }}</span>
          <span v-else>&nbsp;/&nbsp;{{ item.tagsName }}</span>
        </div>
      </div>
      <div v-if="listData.userInfo && listData.userInfo.length > 0">
        <div v-for="(item, index) in listData.userInfo" :key="index" class="live-obj">
          <el-image
            style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden;"
            :src="item.avatarUrl"
          />
          <div class="info">
            <div class="name fs-14">{{ item.name }}</div>
            <div class="scholl fs-12">{{ item.school }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="content marginT30">
      <div class="title">直播详情</div>
      <div v-if="sources.length" class="block imgbox marginT30">

        <DPlayer :sources="sources" />
      </div>

      <div class="block imgbox marginT30">
        <el-image :src="listData.coverImg">
          <div slot="placeholder" class="image-slot">
            加载中
            <span class="dot">...</span>
          </div>
        </el-image>
      </div>
      <p v-html="listData.atvDescribe" />
      <div class="userList-box marginT40">
        <ul class="userList">
          <li v-for="(item, index) in enrollList" v-if="index <= 4" :key="index">
            <el-avatar v-if="item.avatarUrl" fit="cover" size="medium" :src="item.avatarUrl" />
            <el-avatar
              v-else
              fit="cover"
              size="medium"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
          </li>
          <li class="fs-16 line-height40">
            <template v-if="enrollNumTotal > 4">
              <span />
              <span />
              <span />
              等
            </template>
            {{ enrollNumTotal }}人已报名
          </li>
          <li v-if="enrollNumTotal>0" class="fs-16 line-height40">
            <el-button type="primary" @click="openParticipate()">查看详情</el-button>
          </li>
        </ul>
      </div>
     <el-dialog
       v-if="ParticipantItem.length"
       :visible.sync="participateVisiable"
       :show-close="false"
       title="参与人"
       :append-to-body="false"
       :lock-scroll="false"
       custom-class="participateDialog"
     >
       <ParticipantItem :list="ParticipantItem" comment-type="TEACHRESEARCH" />
     <div class="ov">
     <Pagination float="right" :total="ParticipantItem.length" @pagiontaion="getParticipantItemPage" />
       </div>
       </el-dialog>
      <div class="button-box">
        <div class="btn" :class="listData.liked ? 'active' : ''" @click="getThumb">
          <el-image v-if="listData.liked" class="img" :src="require('@/assets/images/giveed.png')" />
          <el-image v-else class="img" :src="require('@/assets/images/give.png')" />点赞
        </div>
        <div
          v-clipboard:copy="copyUrl"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          class="btn"
        >
          <el-image class="img" :src="require('@/assets/images/share.png')" />分享
        </div>
        <div
          class="btn"
          :class="listData.collected ? 'active' : ''"
          @click="listData.collected ? getCancelCollect() : getCollect()"
        >
          <el-image
            v-if="listData.collected"
            class="img"
            :src="require('@/assets/images/collected.png')"
          />
          <el-image v-else class="img" :src="require('@/assets/images/collect.png')" />收藏
        </div>
      </div>
    </div>
    <Comment :list="listData" :comment-type="commentType" />
  </div>
</template>

<script>
import {
  webCastDetail,
  collectLive,
  cancelCollectLive,
  webCastUrl,
  enroll,
  playBack,
  delWebCast,
  getParticipantItemPage,
  enrollAudit
} from '@/api/activity'
import { thumb } from '@/api/basic'
import Pagination from '@/components/Pagination'
import DPlayer from '@/components/DPlayer'
import Comment from '@/components/comment'
import ParticipantItem from './components/ParticipantItem'
export default {
  components: {
    DPlayer,
    Comment,
    Pagination,
    ParticipantItem
  },
  data () {
    return {
      isDisplay: false,
      ParticipantItem:[],
      copyUrl: window.location.href,
      listData: null,
      enrollList: [],
      enrollNumTotal: null,
      sources: [],
      commentType: 'WEB_CAST',
      participantItemList: {},
      participateVisiable: false
    }
  },

  created () {
    console.log(this.$router.query)
    this.init()
  },
  methods: {
    init () {
      webCastDetail(this.$route.query.activityId).then(res => {
        var toArr = arr => {
          var newArr = []
          arr.map(item => {
            newArr = newArr.concat(item.tagList)
          })
          return newArr
        }

        res.data.categoryArr = []
        if (res.data.categoryList && res.data.categoryList.length > 0) {
          var categoryArr = toArr(res.data.categoryList)
          categoryArr.map(item => {
            res.data.categoryArr.push(item)
          })
        }

        res.data.tagListArr = []
        if (res.data.tagList && res.data.tagList.length > 0) {
          var tagListArr = toArr(res.data.tagList)
          tagListArr.map(item => {
            res.data.tagListArr.push(item)
          })
        }

        var items = res.data.userInfo.filter(item => item.userId === this.$store.getters.userId)
        this.isDisplay = !!(items && items.length > 0)

        res.data.subjectId = res.data.activityId
        this.listData = res.data
        this.getPlayBack()
        this.getEnroll()
        // this.getCommentPage()
      })
    },
   getParticipantItemPage(page = 1, pageSize = 10){
     getParticipantItemPage({
       condition: this.listData.activityId,
       pager: {
         page,
         pageSize
       }
     }).then(res=>{
       this.enrollData = res.data
       this.enrollNumTotal = res.data.total
     })
   },
   openParticipate(){
        this.participateVisiable = !this.participateVisiable
       this.getParticipantItemPage()

     },
    open () {
      if (
        this.listData.status === 'NOT_STARTED' ||
        this.listData.status === 'ONGOING'
      ) {
        this.getWebCastUrl()
      } else if (this.listData.status === 'END') {
        this.$message({
          message: '活动已结束',
          type: 'warning'
        })
      } else {
        this.$message({
          message: '活动不在时间范围内不允许开启直播',
          type: 'warning'
        })
      }
    },
    edit () {
      console.log(this.listData.status)
      if (this.listData.status === 'END') {
        this.$message({
          message: '活动已结束',
          type: 'warning'
        })
      } else {
        this.$router.push({
          name: 'pushIssueLive',
          query: { activityId: this.listData.activityId }
        })
      }
    },

    del () {
      const msg = '确认是否删除该直播！'
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delWebCast(this.listData.activityId).then(res => {
            this.$router.replace({
              name: 'ActivityList',
              query: { activeTabName: 'Live' }
            })
          })
          // /activity/activity
          // this.ruleForm.stepList[firstIndex].activities.splice(secondIndex, 1);
        })
        .catch(() => {
          // 取消操作
          console.log('cancel')
        })
    },
    getPlayBack () {
      playBack(this.listData.activityId).then(res => {

        this.sources = res.data
      })
    },
    getEnroll (page = 1, pageSize = 10) {
      enroll({
        condition: this.listData.activityId,
        pager: {
          page,
          pageSize
        }
      }).then(res => {
        this.enrollList = res.data.records
        this.enrollData = res.data
        this.enrollNumTotal = res.data.total
      })
    },
    getWebCastUrl () {
      webCastUrl(this.listData.activityId).then(res => {
        window.open(res.data, '_blank')
      })
    },
    getCollect () {
      collectLive({
        webCastId: this.listData.activityId
      }).then(res => {
        this.listData.collected = true
        this.$message({
          message: '收藏成功',
          type: 'success'
        })
      })
    },
    getCancelCollect () {
      cancelCollectLive({
        webCastId: this.listData.activityId
      }).then(res => {
        this.listData.collected = false
        this.$message({
          message: '收藏取消',
          type: 'success'
        })
      })
    },
    getThumb () {
      thumb({
        isThumb: !this.listData.liked,
        subjectId: this.listData.activityId,
        subjectType: 'WEB_CAST'
      }).then(res => {
        this.listData.liked = !this.listData.liked
        this.listData.liked
          ? this.$message({
            message: '点赞成功',
            type: 'success'
          })
          : this.$message({
            message: '取消点赞',
            type: 'success'
          })
      })
    },
    onCopy (e) {
      // console.log("copyUrl:", this.copyUrl);
      this.$message({
        message: '分享链接复制成功',
        type: 'success'
      })
    },
    onError (e) {
      this.$message.error('复制失败')
    }
  }
}
</script>
<style lang="scss">
//.participateDialog{
//  height:55vh;
//}
</style>
<style lang="scss" scoped>
.container {
  padding: 0 40px;

  .title-box {
    height: 212px;
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-top: 40px;
    padding: 32px 40px;
    .title {
      display: flex;
      justify-content: space-between;
    }

    .classify-box {
      display: flex;
      .classify,
      .obj {
        color: rgba(0, 0, 0, 0.45);
      }
    }

    .live-obj {
      margin-top: 24px;
      display: flex;
      .info {
        margin-left: 8px;
        .name {
          color: rgba(0, 0, 0, 0.55);
        }
        .scholl {
          margin-top: 3px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }

  .content {
    background: white;
    border-radius: 16px;
    padding-bottom: 40px;
    .title {
      padding: 0 42px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e2e2e2;
    }
    p {
      padding: 0 120px;
      margin-top: 40px;

      font-size: 16px;
      font-family: AppleSystemUIFont;
      color: rgba(0, 0, 0, 0.45);
      line-height: 24px;
    }
    .imgbox {
      display: flex;
      justify-content: center;
      padding: 0 120px;
    }
    .userList-box {
      display: flex;
      justify-content: center;
      padding: 0 120px;
      .userList {
        display: flex;
        li {
        }
        li:not(:first-child) {
          margin-left: 12px;
        }
        li:last-child {
          color: rgba(0, 0, 0, 0.65);
          display: flex;
          align-items: center;
          margin-left: 20px;
          span {
            margin-right: 4px;
            display: flex;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            background: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }

    .button-box {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      border-top: 1px solid rgba(0, 0, 0, 0.15);
      padding-top: 40px;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 40px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        cursor: pointer;

        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 40px;
      }
      .btn:not(:first-child) {
        margin-left: 40px;
      }
      .btn.active {
        border: 1px solid #54b87b;
        color: #54b87b;
      }
      .btn.active:last-child {
        border: 1px solid #f1bf25;
        color: #f1bf25;
      }
      .img {
        width: 24px;
        height: 24px;
        overflow: hidden;
        margin-right: 5px;
      }
    }
  }
}
</style>
